<template>
  <div class="web3-container">
    <!-- 背景动画 -->
    <div class="web3-background">
      <div class="hexagon-grid"></div>
      <div class="particles"></div>
    </div>

    <!-- header -->
    <div class="hero-header">
      <div class="header-content">
        <span class="header-logo">
          <img src="/src/pages/index/static/logo.png" alt="">
        </span>
        <span class="hear-text">
          <div class="platform-subtitle">
            区块链安全保障技术政务平台
          </div>
          <div class="hearderPitem">
            社会保障助老多功能平台
          </div>
        </span>
        <!-- <img class="flag-image" src="/src/pages/index/static/flag4.png" alt=""> -->
        <div class="web3-button home-button" @click="toHome()">
          <i class="el-icon-s-home"></i> 首页
        </div>
        <div class="web3-button logout-button" @click="loginOff()">
          <i class="el-icon-switch-button"></i> 注销
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="user-profile-container">
        <!-- 浮动语音助手组件会自动显示在页面右侧 -->
        <SpeechAssistant />
        <!-- 基本信息卡片 -->
        <el-card class="profile-card web3-card">
          <template #header>
            <div class="card-header">
              <div class="card-title-with-icon">
                <i class="el-icon-user-solid web3-icon"></i>
                <h3>基本信息</h3>
              </div>
              <el-button class="web3-edit-button" @click="editBasicInfo">
                <i class="el-icon-edit"></i> 编辑
              </el-button>
            </div>
          </template>
          <div class="profile-info">
            <div class="avatar-container">
              <div class="avatar-frame">
                <el-avatar shape="circle" :size="100" fit="fill" :src="userInfo.avatar" />
                <div class="avatar-glow"></div>
              </div>
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="file => handleAvatarUpload(file.raw)"
                :before-upload="beforeAvatarUpload"
              >
                <el-button class="web3-upload-button">更换头像</el-button>
              </el-upload>
            </div>
            <div class="info-list">
              <div class="info-item web3-info-item">
                <span class="label">姓名：</span>
                <span class="value">{{ userInfo.name }}</span>
              </div>
              <div class="info-item web3-info-item">
                <span class="label">身份证号：</span>
                <span class="value">{{ userInfo.idNumber }}</span>
              </div>
              <div class="info-item web3-info-item">
                <span class="label">联系电话：</span>
                <span class="value">{{ userInfo.phone }}</span>
              </div>
              <div class="info-item web3-info-item">
                <span class="label">电子邮箱：</span>
                <span class="value">{{ userInfo.email }}</span>
              </div>
              <div class="info-item web3-info-item">
                <span class="label">钱包地址：</span>
                <span class="value wallet-address">{{ userInfo.address }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 社保信息概览卡片 -->
        <el-card class="profile-card web3-card nft-style-card">
          <template #header>
            <div class="card-header">
              <div class="card-title-with-icon">
                <i class="el-icon-medal web3-icon"></i>
                <h3>社保信息概览</h3>
              </div>
              <div class="blockchain-badge">
                <i class="el-icon-connection"></i> 已上链
              </div>
            </div>
          </template>
          <div class="insurance-overview">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="overview-item web3-stat-box">
                  <div class="item-title">参保状态</div>
                  <div class="item-value">
                    <el-tag :type="userInfo.insuranceStatus === '正常' ? 'success' : 'warning'" class="web3-tag">
                      {{ userInfo.insuranceStatus }}
                    </el-tag>
                    <div class="status-indicator"></div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview-item web3-stat-box">
                  <div class="item-title">累计缴费月数</div>
                  <div class="item-value crypto-value">{{ userInfo.paymentMonths }}<span class="unit">个月</span></div>
                  <div class="progress-bar">
                    <div class="progress" :style="{width: Math.min(userInfo.paymentMonths/120*100, 100) + '%'}"></div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview-item web3-stat-box">
                  <div class="item-title">个人账户余额</div>
                  <div class="item-value crypto-value">¥{{ userInfo.balance }}</div>
                  <div class="token-icon"></div>
                </div>
              </el-col>
            </el-row>

            <!-- 社保操作按钮区 -->
            <div class="insurance-actions">
              <el-button class="web3-action-button payment-button" @click="paymentDialogVisible = true">
                <i class="el-icon-money"></i> 缴纳社保
              </el-button>
              <el-button class="web3-action-button transfer-button" @click="dialogVisible = true">
                <i class="el-icon-refresh"></i> 社保转移
              </el-button>
              <el-button class="web3-action-button browser-button" @click="openBlockchainBrowser()">
                <i class="el-icon-search"></i> 链上查询
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 账户安全设置卡片 -->
        <el-card class="profile-card web3-card security-card">
          <template #header>
            <div class="card-header">
              <div class="card-title-with-icon">
                <i class="el-icon-lock web3-icon"></i>
                <h3>账户安全</h3>
              </div>
            </div>
          </template>
          <div class="security-settings">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="security-item web3-security-item">
                  <div class="security-icon-container">
                    <i class="el-icon-key security-icon"></i>
                  </div>
                  <div class="item-info">
                    <span class="item-title">登录密码</span>
                    <span class="item-desc">建议定期更换密码，确保账户安全</span>
                    <div class="security-strength">
                      <div class="strength-bar high"></div>
                      <span>强</span>
                    </div>
                  </div>
                  <el-button class="web3-security-button" @click="changePassword">
                    <i class="el-icon-edit"></i>
                  </el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="security-item web3-security-item">
                  <div class="security-icon-container">
                    <i class="el-icon-mobile-phone security-icon"></i>
                  </div>
                  <div class="item-info">
                    <span class="item-title">手机绑定</span>
                    <span class="item-desc">已绑定：{{ userInfo.phone }}</span>
                    <div class="verification-status">
                      <i class="el-icon-check"></i> 已验证
                    </div>
                  </div>
                  <el-button class="web3-security-button" @click="changePhone">
                    <i class="el-icon-edit"></i>
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 缴纳社保对话框 -->
    <el-dialog
      v-model="paymentDialogVisible"
      title="缴纳社保"
      width="500px"
    >
      <el-form :model="paymentForm" label-width="100px">
        <el-form-item label="缴纳金额">
          <el-input v-model="paymentForm.amount" type="number" placeholder="请输入缴纳金额"></el-input>
        </el-form-item>
        <el-form-item label="缴纳类型">
          <el-radio-group v-model="paymentForm.paymentType">
            <el-radio label="个人缴纳">个人缴纳</el-radio>
            <el-radio label="单位缴纳">单位缴纳</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paymentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPayment">确认缴纳</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 社保转移对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="社保转移申请"
      width="600px"
    >
      <el-form :model="transferForm" label-width="140px">
        <el-form-item label="当前社保局地址">
          <el-input v-model="transferForm.currentBureauAddress" placeholder="请输入当前社保局地址"></el-input>
        </el-form-item>
        <el-form-item label="当前所在省份">
          <el-select v-model="transferForm.fromCity" placeholder="请选择当前所在省份" style="width: 100%">
            <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转入社保局地址">
          <el-input v-model="transferForm.toBureauAddress" placeholder="请输入转入社保局地址"></el-input>
        </el-form-item>
        <el-form-item label="转入省份">
          <el-select v-model="transferForm.toCity" placeholder="请选择转入省份" style="width: 100%">
            <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="isSubmitting">取消</el-button>
          <el-button type="primary" @click="submitTransfer" :loading="isSubmitting" :disabled="isSubmitting">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import { ElMessage, ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';
import SpeechAssistant from '../../components/SpeechAssistant.vue';
import myAxios from "../../plugins/myAxios.js";
import { getCurrentUserMaskedInfo,updateAvatar } from '@/apis/api';

const router = useRouter();

onMounted(async ()=>{
  const currentUser = await getCurrentUserMaskedInfo();
  console.log(currentUser)
})

// 用户信息
const userInfo = reactive({
  avatar: '',
  name: '',
  idNumber: '',
  phone: '',
  email: '',
  address: '',
  insuranceStatus: '正常',
  paymentMonths: 0,
  balance: '0.00'
})

// 获取用户信息
onMounted(async () => {
  try {
    const response = await getCurrentUserMaskedInfo()
    if (response.data.code === 200 && response.data.data) {
      const userData = response.data.data
      userInfo.name = userData.name
      userInfo.idNumber = userData.maskedIdNumber
      userInfo.phone = userData.maskedPhone
      userInfo.email = userData.maskedEmail
      userInfo.address =  userData.maskedEmployeeAddress
      console.log(userData.avatar);
      //userInfo.avatar = 'http://pension-blockchain.oss-cn-guangzhou.aliyuncs.com/282cdafc-4930-46e8-8fcf-8a06e4a51004.jpg'
      console.log("userInfo.avatar",userInfo.avatar);
      userInfo.avatar = userData.avatar || '/src/pages/index/static/default-avatar.png'
      // 其他信息保持默认值，因为API中没有对应字段
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败，请稍后重试')
  }
})

// 头像上传前处理
const beforeAvatarUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('上传头像图片只能是图片格式!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
    return false;
  }
  return true;
};

// 头像上传处理
const handleAvatarUpload = async (file: File) => {
  try {
    const response = await updateAvatar(file);
    if (response.data.code === 200) {
      // 直接使用阿里云OSS返回的URL更新头像
      userInfo.avatar = response.data.data; // response.data.data为阿里云OSS的图片URL
      ElMessage.success('头像更新成功');
    } else {
      ElMessage.error(response.data.msg || '头像更新失败');
    }
  } catch (error) {
    console.error('头像上传失败:', error);
    ElMessage.error('头像上传失败，请稍后重试');
  }
}


// 编辑基本信息
const editBasicInfo = () => {
  // TODO: 实现编辑基本信息的逻辑
  ElMessage.info('编辑基本信息功能开发中')
}

// 修改密码
const changePassword = () => {
  // TODO: 实现修改密码的逻辑
  ElMessage.info('修改密码功能开发中')
}

// 更换手机号
const changePhone = () => {
  // TODO: 实现更换手机号的逻辑
  ElMessage.info('更换手机号功能开发中')
}

// 缴纳社保对话框
const paymentDialogVisible = ref(false)
const paymentForm = reactive({  amount: '',
  paymentType: '个人缴纳'
})

// 社保转移对话框
const dialogVisible = ref(false)
const transferForm = reactive({
  currentBureauAddress: '',
  fromCity: '',
  toBureauAddress: '',
  toCity: ''
})

// 省份列表（示例数据）
const provinces = [
  { code: '11', name: '北京市' },
  { code: '31', name: '上海市' },
  { code: '44', name: '广东省' },
  { code: '33', name: '浙江省' },
  { code: '32', name: '江苏省' }
]

// 提交缴纳社保
const submitPayment = () => {
  if (!paymentForm.amount) {
    ElMessage.warning('请输入缴纳金额')
    return
  }

  // TODO: 实际的社保缴纳API调用
  setTimeout(() => {
    ElMessage.success('社保缴纳成功')
    paymentDialogVisible.value = false
    // 重置表单
    paymentForm.amount = ''
  }, 1000)
}

// 提交社保转移
const isSubmitting = ref(false)
const submitTransfer = () => {
  if (!transferForm.currentBureauAddress || !transferForm.fromCity ||
      !transferForm.toBureauAddress || !transferForm.toCity) {
    ElMessage.warning('请填写完整的转移信息')
    return
  }

  // 设置加载状态
  isSubmitting.value = true

  let postData = {
    senderAddress: localStorage.getItem('senderAddress'),
    fromCity: transferForm.fromCity,
    toCity: transferForm.toCity,
    applicant: localStorage.getItem('senderAddress'),
    currentBureauAddress: transferForm.currentBureauAddress,
    toBureauAddress: transferForm.toBureauAddress
  }

  // 设置请求超时
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('请求超时，请稍后再试')), 15000) // 15秒超时
  })

  // 使用Promise.race竞争请求和超时
  Promise.race([
    myAxios.post('/employee/applyForTransfer', postData),
    timeoutPromise
  ])
  .then((res:any) => {
    if (res.data.code == 200) {
      ElMessage.success('社保转移申请提交成功')
      dialogVisible.value = false
      // 重置表单
      Object.keys(transferForm).forEach(key => {
        transferForm[key] = ''
      })
    } else {
      ElMessage.error(`请求内容有误: ${res.data.msg || '未知错误'}`)
    }
  })
  .catch((error) => {
    console.error('社保转移申请提交失败:', error)
    if (error.message === '请求超时，请稍后再试') {
      ElMessage.error('请求超时，请检查网络连接后重试')
    } else if (error.response) {
      ElMessage.error(`请求失败: ${error.response.data?.msg || '服务器错误'}`)
    } else {
      ElMessage.error('网络错误，请稍后重试')
    }
  })
  .finally(() => {
    // 无论成功还是失败，都重置加载状态
    isSubmitting.value = false
  })
}

// 打开区块链浏览器
const openBlockchainBrowser = () => {
  router.push('/user/blockchain-browser')
}

// 返回首页
const toHome = () => {
  router.push('/index/top')
}

// 注销功能
const loginOff = () => {
  localStorage.removeItem('senderAddress')
  localStorage.removeItem('sponsorName')
  ElNotification({
    title: '成功',
    message: '注销成功',
    type: 'success',
  })
  router.push('/')
}
</script>

<style>
/* Web3 容器样式 */
.web3-container {
  position: relative;
  min-height: 100vh;
  background-color: #0f172a;
  color: #e2e8f0;
  overflow-x: hidden;
}

/* Web3 背景动画 */
.web3-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 六边形网格背景 */
.hexagon-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#1e3a8a 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.1;
}

/* 粒子效果 */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#4f46e5 1px, transparent 1px);
  background-size: 50px 50px;
  animation: particleAnimation 20s infinite linear;
  opacity: 0.05;
}

@keyframes particleAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  min-height: calc(100vh - 120px);
}

.user-profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Web3 卡片样式 */
.web3-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  backdrop-filter: blur(8px);
  margin-bottom: 30px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.web3-card:hover {
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.25);
  transform: translateY(-5px);
}

/* NFT 风格卡片 */
.nft-style-card {
  position: relative;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.nft-style-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #4f46e5, #3b82f6, #10b981, #4f46e5);
  z-index: -1;
  border-radius: 14px;
  background-size: 400% 400%;
  animation: gradientBorder 6s ease infinite;
}

@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 安全卡片样式 */
.security-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(79, 70, 229, 0.2);
}

.card-title-with-icon {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.web3-icon {
  font-size: 24px;
  color: #4f46e5;
  background: rgba(185, 75, 184, 0.77);
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

/* 区块链徽章 */
.blockchain-badge {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(79, 70, 229, 0.3);
}

.profile-info {
  display: flex;
  gap: 40px;
  padding: 20px;
}

/* 头像容器样式 */
.avatar-container {
  text-align: center;
}

.avatar-frame {
  position: relative;
  margin-bottom: 15px;
  display: inline-block;
}

.avatar-glow {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #4f46e5, #3b82f6, #10b981, #4f46e5);
  z-index: -1;
  opacity: 0.7;
  animation: glowAnimation 3s infinite alternate;
}

@keyframes glowAnimation {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.05); }
}

.avatar-uploader {
  margin-top: 15px;
}

.web3-upload-button {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.web3-upload-button:hover {
  background: rgba(79, 70, 229, 0.2);
  transform: translateY(-2px);
}

.info-list {
  flex: 1;
}

.web3-info-item {
  margin-bottom: 20px;
  font-size: 14px;
  padding: 10px 15px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  border-left: 3px solid #4f46e5;
  transition: all 0.3s ease;
}

.web3-info-item:hover {
  background: rgba(15, 23, 42, 0.7);
  transform: translateX(5px);
}

.web3-info-item .label {
  color: #94a3b8;
  margin-right: 10px;
  font-weight: 500;
}

.web3-info-item .value {
  color: #e2e8f0;
  font-weight: 600;
}

.wallet-address {
  font-family: monospace;
  background: rgba(79, 70, 229, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: #4f46e5;
}

/* 社保信息概览样式 */
.insurance-overview {
  padding: 20px;
}

.web3-stat-box {
  text-align: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(79, 70, 229, 0.2);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.web3-stat-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

.web3-stat-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15);
}

.item-title {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 10px;
}

.item-value {
  font-size: 20px;
  font-weight: bold;
  color: #e2e8f0;
}

.crypto-value {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.unit {
  font-size: 14px;
  opacity: 0.7;
  margin-left: 5px;
}

.web3-tag {
  background: rgba(79, 70, 229, 0.1) !important;
  border: 1px solid rgba(79, 70, 229, 0.3) !important;
  color: #4f46e5 !important;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
}

.status-indicator {
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  margin-left: 10px;
  box-shadow: 0 0 10px #10b981;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(79, 70, 229, 0.1);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  border-radius: 3px;
  transition: width 1s ease;
}

.token-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
  border-radius: 50%;
  margin: 10px auto 0;
  position: relative;
}

.token-icon::before {
  content: '¥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

/* 社保操作按钮区样式 */
.insurance-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.web3-action-button {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: none;
  color: white;
  min-width: 120px;
}

.web3-action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}

.web3-action-button:hover::before {
  left: 100%;
}

.payment-button {
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.transfer-button {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.browser-button {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.web3-action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

/* 安全设置样式 */
.security-settings {
  padding: 20px;
}

.web3-security-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(79, 70, 229, 0.2);
  transition: all 0.3s ease;
}

.web3-security-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15);
}

.security-icon-container {
  width: 50px;
  height: 50px;
  background: rgba(79, 70, 229, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.security-icon {
  font-size: 24px;
  color: #4f46e5;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 5px;
}

.item-desc {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.security-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.strength-bar {
  width: 60px;
  height: 4px;
  background: rgba(79, 70, 229, 0.1);
  border-radius: 2px;
  position: relative;
}

.strength-bar.high::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #10b981;
  border-radius: 2px;
}

.verification-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #10b981;
  font-size: 12px;
  margin-top: 5px;
}

.web3-security-button {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.web3-security-button:hover {
  background: rgba(79, 70, 229, 0.2);
  transform: rotate(15deg);
}

.web3-edit-button {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.web3-edit-button:hover {
  background: rgba(79, 70, 229, 0.2);
  transform: translateY(-2px);
}

/* 头部样式 */
.hero-header {
  background: rgba(15, 23, 42, 0.9);
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid rgba(79, 70, 229, 0.2);
  z-index: 10;
}

.header-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.header-logo {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.3);
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.3);
}

.hear-text {
  margin-left: 20px;
  width: 300px;
}

.platform-subtitle {
  margin-top: 10px;
  display: inline-block;
  color: #94a3b8;
  font-size: 16px;
  font-weight: 700;
}

.hearderPitem {
  width: 500px;
  color: #4f46e5;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.flag-image {
  margin-left: 10%;
  height: 39px;
  zoom: 2;
}

.web3-button {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 999;
  cursor: pointer;
}

.home-button {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.3);
  position: absolute;
  right: 120px;
  top: 28px;
}

.logout-button {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  position: absolute;
  right: 20px;
  top: 28px;
}

.web3-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
}

/* 语音助手已改为浮动式，移除了原卡片样式 */

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-info {
    flex-direction: column;
    align-items: center;
  }

  .info-list {
    width: 100%;
  }

  .web3-stat-box {
    margin-bottom: 20px;
  }

  .header-content {
    flex-direction: column;
    padding: 10px;
  }

  .home-button, .logout-button {
    position: static;
    margin: 10px 5px;
  }

  .flag-image {
    margin: 10px 0;
  }

  .insurance-actions {
    flex-direction: column;
    align-items: center;
  }

  .web3-action-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
